import { useState } from "react"
import { actionCreaters as registerActionCreaters } from "./store"
import { actionCreaters as flashActionCreaters } from "../Flash/store"
import { useDispatch } from "react-redux"
import shortid from 'shortid'
const Registerform = (props) => {
    const param = {
        username: "",
        email: "",
        password: '',
        passwordConfirm: ""
    }
    const [formData, setFormData] = useState(param)
    const [errMsg, setErrMsg] = useState([])
    const dispatch = useDispatch()
    const handleSubmit = async e => {
        e.preventDefault()
        console.log(formData, props);
        const { data } = await props.RegisterFn.registerAc(formData)
        if (data.status === 1) {
            return data.msg && setErrMsg(data.msg)
        }
        props.history.push("/")
        // dispatch({
        //     type: 'ADD_FLASH',
        //     payload: {
        //         type: 'alert-primary',
        //         text: '注册成功了',
        //         id: shortid.generate()
        //     }
        // })
        props.flashFn.addFlashAc({
            type: 'alert-primary',
            text: '注册成功了',
            id: shortid.generate()
        })
    }
    const changeValue = e => {
        let newFormData = {
            ...formData,
            [e.target.name]: e.target.value
        }
        setFormData(newFormData)
    }
    return (
        <div>
            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label htmlFor="username">username</label>
                    <input onChange={changeValue} defaultValue={formData.username} name="username" type="username" className={(errMsg[0] !== undefined && errMsg[0] === 'username') ? "form-control is-invalid" : "form-control"} />
                    <small className="form-text text-muted">
                        {(errMsg[0] !== undefined && errMsg[0] === 'username') && errMsg[1]}
                    </small>
                </div>
                <div className="form-group">
                    <label htmlFor="text">Email address</label>
                    <input onChange={changeValue} defaultValue={formData.email} name="email" type="email" className="form-control" id="email" />
                    <small className="form-text text-muted">{(errMsg[0] !== undefined && errMsg[0] === 'email') ? errMsg[1] : null}</small>
                </div>
                <div className="form-group">
                    <label htmlFor="password">Password</label>
                    <input onChange={changeValue} defaultValue={formData.password} name="password" type="password" className="form-control" />
                    <small className="form-text text-muted">{(errMsg[0] !== undefined && errMsg[0] === 'password') && errMsg[1]}</small>
                </div>
                <div className="form-group">
                    <label htmlFor="passwordConfirm">confirm Password</label>
                    <input onChange={changeValue} defaultValue={formData.passwordConfirm} name="passwordConfirm" type="password" className="form-control" />
                    <small className="form-text text-muted">{(errMsg[0] !== undefined && errMsg[0] === 'passwordConfirm') && errMsg[1]}</small>
                </div>
                <button type="submit" className="btn btn-primary">sign up</button>
            </form>
        </div>
    )
}
export default Registerform